<template>
  <CommonPanel title="人员信息统计">
    <div class="content-box1">
      <div class="content-box1_bottom">
        <div class="connent-box">
          <div class="connent-box_top">
            <div class="value-box">{{ data?.count_num }}</div>
            <div class="text-box">总人数</div>
          </div>
          <div class="connent-box_bottom">
            <div class="value-box">{{ data?.card_num }}</div>
            <div class="text-box">卡片总数</div>
          </div>
          <!-- <div class="connent-box_bottom">
            <div class="value-box">45</div>
            <div class="text-box">人数总数</div>
          </div> -->
        </div>
      <div style="height: 100%;flex: 1;position: relative;">
        <CommonChart :option="option" />
        <div style="position: absolute;bottom: 4px;color: #fff;left: 54%;">
          <span style="margin-right: 4px;"><span style="width: 6px;height: 6px;background: red;display: inline-block;"></span> 男 {{ isNaN(legendData[0].value/numTotal*100)?0: (legendData[0].value/numTotal*100).toFixed(0) }}%</span>
          <span><span style="width: 6px;height: 6px;background: #2c75f2;display: inline-block;"></span> 女 {{ isNaN(legendData[1].value/numTotal*100)?0: (legendData[1].value/numTotal*100).toFixed(0) }}%</span></div>
        </div>
      </div>
    </div>
  </CommonPanel>
</template>

<script setup>
import { computed, reactive, watch,ref } from "vue";
import { echartMapPx, numberFormat } from "@/utils";
import { defineEmits } from "vue";
import iconPartFj from "@/assets/build-image/icon_part_fj@2x.png";
import iconPartTD from "@/assets/build-image/icon_part_td@2x.png";
import iconPartSzjc from "@/assets/build-image/icon_part_szjc@2x.png";
import iconPartQt from "@/assets/build-image/icon_part_qt@2x.png";

import { defineProps } from 'vue';
const emits = defineEmits(["childEvent"]);

const props = defineProps({
  data: Object
});


const legendData = reactive([
  {
    value: props.data?.male_num,
    name: "男",
    originName: "男",
    unit: "",
    icon: iconPartSzjc,
    code: "SZJC",
    color: "#2C75F2",
  },
  {
    value: props.data?.girl_num,
    name: "女",
    unit: "",
    icon: iconPartTD,
    code: "TDKF",
    color: "#FF4D4F",
  },
]);

const numTotal = ref(0)

  // 使用 watch 监听 props.data 的变化
  watch(() => props.data, (newData) => {
      if (newData) {
        legendData[0].value = newData.male_num;
        legendData[1].value = newData.girl_num;
        numTotal.value=legendData[1].value+legendData[0].value
      }
    });

const option = computed(() => {
  return {
    tooltip: {
      position: "right",
      trigger: "item",
      formatter: `{b}: {d}%`,
    },
    series: [
      {
        type: "pie",
        selectedMode: "single",
        radius: [0, echartMapPx(60).value],
        center: [echartMapPx(134).value, "50%"],
        label: {
          show: true,
          position: "inside",
          color: "#fff",
          fontSize: echartMapPx(12).value,
          lineHeight: echartMapPx(12).value * 1.15,
        },
        labelLine: {
          show: false,
        },
        data: legendData.map((item) => {
          return {
            name: item.name,
            value: item.value,
            itemStyle: {
              color: item.color,
            },
          };
        }),
      },
    ],
  };
});
</script>

<style lang="scss" scoped>
.content-box1 {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 16px 6px;
  flex-direction: column;

  &_top {
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #9BA3AE;

    span {
      font-weight: 600;
      font-size: 24px;
      color: #65E3F8;
    }
  }

  &_bottom {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;

    .echart-box {
      flex: 0.7;
      height: 100%;
    }

    .connent-box {
      flex: 0.5;
      height: 100%;
      display: grid;
      grid-template-rows: 1fr 1fr;
      grid-row-gap: 5px;

      &_top {
        background: url('../../../assets/image/device1.png') no-repeat center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        // background-size: 150px;
        background-size: 100%;
      }

      &_bottom {
        background: url('../../../assets/image/device2.png') no-repeat center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-size: 100%;
      }

      .value-box {
        margin-left: 50%;
        color: #fff;
        font-size: 16px;
      }

      .text-box {
        margin-left: 50%;
        margin-top: 4px;
        color: #fff;
        font-size: 14px;
      }

    }

  }
}
</style>

